<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">发票抬头:</label>
          <input
            type="text"
            v-model="paramobj.inv_company"
            placeholder="请输入发票抬头"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          >
        </div>
      </div>

      <div class="block">
        <div class="formitem">
          <label class="label">税务登记证号:</label>
          <input
            type="text"
            v-model="paramobj.inv_code"
            placeholder="请输入税务登记证号"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          >
        </div>
      </div>

      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">注册场所地址:</label>
          <input
            type="text"
            v-model="paramobj.inv_reg_address"
            placeholder="请输入注册场所地址"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          >
        </div>
      </div>

      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">注册固定电话:</label>
          <input
            type="text"
            v-model="paramobj.inv_reg_phone"
            placeholder="注册固定电话 如028-11223344"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          >
        </div>
      </div>

      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">开户行名称:</label>
          <input
            type="text"
            v-model="paramobj.inv_reg_bname"
            placeholder="请输入开户行名称"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          >
        </div>
      </div>

      <div class="block" style="  margin-top: 12px;">
        <div class="formitem">
          <label class="label">基本开户账号:</label>
          <input
            type="text"
            v-model="paramobj.inv_reg_bank_account"
            placeholder="请输入基本开户账号"
            placeholder-class="placeholder"
            @focusout="inputBlur"
            @focusin="inputFocus"
          >
        </div>
      </div>

      <label class="default">
        <input v-model="paramobj.is_default" type='checkbox' value=''>
        <span>设为默认信息</span>
      </label>

      <div class="block sumit">
        <button type="button" @click="onSubmit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Me from '@/dll/me'

  export default {
    name: 'meInvoiceEdit',
    data () {
      return {
        xheader: {
          title: '添加开票信息'
        },
        taxpayerIdentificationReg: /^[0-9a-zA-Z]{5,24}$/, // 纳税人识别号正则
        // bankReg: /^[0-9]{15,19}$/, // 银行账号正则
        bankReg: /^[0-9]{5,24}$/, // 银行账号正则
        isSubmit: false,
        isEdit: false,
        paramobj: {
          type: 2, // 发票类型 1 普通公司发票 2增值税发票
          inv_code: '', // 纳税人识别号
          inv_company: '', // 单位名称
          inv_reg_address: '', // 注册地址
          inv_reg_phone: '', // 注册电话 注意这里必须是座机
          inv_reg_bname: '', // 开户行名称
          inv_reg_bank_account: '', // 开户银行帐号
          is_default: false // 是否默认
          // inv_receive: '' // 售票人信息
        }
      }
    },
    created () {
      let item = this.$route.query.item

      if (item) {
        this.paramobj = {
          inv_id: item.inv_id, // 增值税发票id
          type: 2, // 增值税发票类型
          inv_company: item.inv_company, // 单位名称
          inv_code: item.inv_code, // 纳税人识别号
          inv_reg_address: item.inv_reg_address, // 注册发票
          inv_reg_phone: item.inv_reg_phone, // 注册电话
          inv_reg_bname: item.inv_reg_bname, // 开户行名称
          inv_reg_bank_account: item.inv_reg_bank_account, // 银行账号
          is_default: Boolean(item.is_default)
        }

        this.isEdit = true
        this.xheader.title = '修改发票信息'
      }
    },
    methods: {
      async onSubmit () {
        let param = this.paramobj
        // let isSubmit = true
        // for (var i in param) {
        //   if (i == 'inv_receive') {
        //     continue
        //   }
        //   if (param[i]) {
        //     continue
        //   } else {
        //     isSubmit = false
        //     break
        //   }
        // }
        // if (!isSubmit) {
        //   return
        // }

        // param.inv_title = param.inv_company
        if (!this.paramobj.inv_company) {
          this.$vux.toast.text('单位名称不能为空')
          return
        }
        if (!this.taxpayerIdentificationReg.test(this.paramobj.inv_code)) {
          this.$vux.toast.text('纳税人识别号格式不正确')
          return
        }
        if (!this.paramobj.inv_reg_address) {
          this.$vux.toast.text('注册地址不能为空')
          return
        }
        if (!this.paramobj.inv_reg_phone) {
          this.$vux.toast.text('注册电话不能为空')
          return
        }
        if (!this.paramobj.inv_reg_bname) {
          this.$vux.toast.text('开户行名称不能为空')
          return
        }
        if (!this.bankReg.test(this.paramobj.inv_reg_bank_account)) {
          this.$vux.toast.text('银行账号格式不正确')
          return
        }

        param.is_default = Number(param.is_default)

        this.$vux.loading.show({
          text: '请稍后'
        })
        let server
        let tip = ''
        if (this.isEdit) {
          server = Me.editIssueInfo
          tip = '修改成功'
        } else {
          server = Me.addIssueInfo
          tip = '添加成功'
        }
        let res = await server(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: tip,
            onHide: () => {
              this.$router.go(-1)
            }
          })
          return
        }
        this.$vux.alert.show({
          title: '提示',
          content: res.msg
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .page {
    padding-bottom: 78px;
  }

  .sumit {
    padding-bottom: 32px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .sumit button {
    font-size: 16px;
  }

  .formitem {
    background-color: #fff;
    display: flex;
    padding: 5px 24px;
    box-sizing: border-box;
    align-items: center;
  }

  .formitem .label {
    display: block;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    width: 110px;
  }

  .formitem input,
  .formitem picker,
  .placeholder {
    flex: 1;
    font-size: 14px;
    color: #9f8d89;
    line-height: 21px;
    background-color: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    display: block;
  }

  .formitem .picker {
    position: relative;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    height: 21px;
    display: block;
    box-sizing: border-box;
    padding-right: 15px;
  }

  .formitem .picker:before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .placeholder {
    opacity: 0.2;
  }

  .default {
    display: flex;
    align-items: center;
    padding: 0 12px;

    input {
      zoom: 135%;
    }
  }
</style>
